<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Clipping</title>

    <style type="text/css">
        .help {
            position: absolute;
            left: 300px;
            top: 20px;
            visibility: hidden;
            width: 100px;
            padding: 10px;
            border: 1px solid #ff0000;
        }

        form {
            margin: 20px;
            background-color: #dfe1cb;
            padding: 20px;
            width: 200px;
        }

        label {
            cursor: help;
        }
    </style>

    <script type="text/javascript">
    //<![CDATA[
        window.onload = function() {
            var labels = document.getElementsByTagName("label");
            for(var i=0; i<labels.length; i++) {
                labels[i].onclick = showHelp;
            }
        }

        function showHelp(evnt) {
            var theEvent = evnt ? evnt :window.event;
            var theSrc = theEvent.target ? theEvent.target : theEvent.srcElement;

            var item1 = document.getElementById("item1");
            var item2 = document.getElementById("item2");

            item1.style.visibility = "hidden";
            item2.style.visibility = "hidden";

            if (theSrc.id == "label1") {
                item1.style.visibility = "visible";
            }
            else {
                item2.style.visibility = "visible";
            }
        }
    //]]>

    </script>
    
</head>
<body>
    <form action="">
        <p>
            <label id="label1"> Item One </label>
            <input type="text" /> <br /> <br />
            <label id="label2"> Item Two </label> 
            <input type="text" />
        </p>
    </form>

    <div id="item1" class="help">
        <p>
            This is the help for the first item. It only shows when you click on the label for the item.
        </p>
    </div>

    <div id="item2" class="help">
        <p>
            This is the help for the second item. It only shows when you click on the label for the item.
        </p>
    </div>
</body>
</html>
